<template>
  <p>
    <a-space>
      <TrainSelect v-model="queryParams.trainCode" width="200px"></TrainSelect>
      <a-date-picker v-model:value="queryParams.date" valueFormat="YYYY-MM-DD" placeholder="请选择日期"></a-date-picker>
      <StationSelect v-model="queryParams.start" width="200px" placeholder="请选择出发地"></StationSelect>
      <StationSelect v-model="queryParams.end" width="200px" placeholder="请选择目的地"></StationSelect>
      <a-button type="primary" @click="handleQuery()">查找</a-button>
    </a-space>
  </p>
  <!--表格-->
  <a-table :dataSource="dailyTrainTickets"
           :columns="columns"
           :pagination="pagination"
           @change="handleTableChange"
           :loading="loading"
           :scroll="{ x: 1280 }"
           sticky>
    <template #bodyCell="{ column, record }">
      <template v-if="column.dataIndex === 'operation'">
      </template>
      <template v-else-if="column.dataIndex === 'station'">
        <strong>{{ record.start }}</strong><br>
        <strong>{{ record.end }}</strong>
      </template>
      <template v-else-if="column.dataIndex === 'time'">
        {{ record.startTime }}<br/>
        {{ record.endTime }}
      </template>
      <template v-else-if="column.dataIndex === 'duration'">
        {{ calDuration(record.startTime, record.endTime) }}<br/>
        <div v-if="record.startTime.replaceAll(':', '') >= record.endTime.replaceAll(':', '')">
          次日到达
        </div>
        <div v-else>
          当日到达
        </div>
      </template>
      <template v-else-if="column.dataIndex === 'tdz'">
        <div v-if="record.tdz >= 0">
          <h3 v-if="record.tdz > 10">{{ record.tdz }}</h3>
          <h3 v-else class="less">{{ record.tdz }}</h3>
          {{ record.tdzPrice }}￥
        </div>
        <div v-else>
          --
        </div>
      </template>
      <template v-else-if="column.dataIndex === 'ydz'">
        <div v-if="record.ydz >= 0">
          <h3 v-if="record.ydz > 10">{{ record.ydz }}</h3>
          <h3 v-else class="less">{{ record.ydz }}</h3>
          {{ record.ydzPrice }}￥
        </div>
        <div v-else>
          --
        </div>
      </template>
      <template v-else-if="column.dataIndex === 'edz'">
        <div v-if="record.edz >= 0">
          <h3 v-if="record.edz > 10">{{ record.edz }}</h3>
          <h3 v-else class="less">{{ record.edz }}</h3>
          {{ record.edzPrice }}￥
        </div>
        <div v-else>
          --
        </div>
      </template>
      <template v-else-if="column.dataIndex === 'rw'">
        <div v-if="record.rw >= 0">
          <h3 v-if="record.rw > 10">{{ record.rw }}</h3>
          <h3 v-else class="less">{{ record.rw }}</h3>
          {{ record.rwPrice }}￥
        </div>
        <div v-else>
          --
        </div>
      </template>
      <template v-else-if="column.dataIndex === 'yw'">
        <div v-if="record.yw >= 0">
          <h3 v-if="record.yw > 10">{{ record.yw }}</h3>
          <h3 v-else class="less">{{ record.yw }}</h3>
          {{ record.ywPrice }}￥
        </div>
        <div v-else>
          --
        </div>
      </template>
    </template>
  </a-table>
</template>

<script setup>
import {onMounted, ref} from 'vue';
import request from "@/utils/request";
import {notification} from 'ant-design-vue'
import dayjs from 'dayjs'
import StationSelect from "@/components/StationSelect.vue";
import TrainSelect from "@/components/TrainSelect.vue";

// 表格加载
let loading = ref(false);
// 添加余票信息的属性
let dailyTrainTicket = ref({
  id: undefined,
  date: undefined,
  trainCode: undefined,
  start: undefined,
  startPinyin: undefined,
  startTime: undefined,
  startIndex: undefined,
  end: undefined,
  endPinyin: undefined,
  endTime: undefined,
  endIndex: undefined,
  tdz: undefined,
  tdzPrice: undefined,
  ydz: undefined,
  ydzPrice: undefined,
  edz: undefined,
  edzPrice: undefined,
  rw: undefined,
  rwPrice: undefined,
  yw: undefined,
  ywPrice: undefined
});
// 表格数据
const dailyTrainTickets = ref([]);
// 分页的三个属性名是固定的
const pagination = ref({
  position: ['bottomCenter'],
  total: 0,
  current: 1,
  pageSize: 5,
  showSizeChanger: true,
  pageSizeOptions: ['5', '10', '20']
});
// 表格展示列
const columns = [
  {
    title: '日期',
    dataIndex: 'date',
    key: 'date',
  },
  {
    title: '车次编号',
    dataIndex: 'trainCode',
    key: 'trainCode',
  },
  {
    title: '车站',
    dataIndex: 'station',
  },
  {
    title: '时间',
    dataIndex: 'time',
  },
  {
    title: '历时',
    dataIndex: 'duration',
  },
  {
    title: '特等座',
    dataIndex: 'tdz',
    key: 'tdz',
  },
  {
    title: '一等座',
    dataIndex: 'ydz',
    key: 'ydz',
  },
  {
    title: '二等座',
    dataIndex: 'edz',
    key: 'edz',
  },
  {
    title: '软卧',
    dataIndex: 'rw',
    key: 'rw',
  },
  {
    title: '硬卧',
    dataIndex: 'yw',
    key: 'yw',
  },
];

// 查询参数
let queryParams = ref({});
// 请求 -- 查询余票信息
const handleQuery = (param) => {
  // 如果无参，则查询当前页
  if (!param) {
    param = {
      pageNum: pagination.value.current,
      pageSize: pagination.value.pageSize
    }
  }
  loading.value = true;
  request.get("/business/admin/daily-train-ticket/list", {
    params: {
      pageNum: param.pageNum,
      pageSize: param.pageSize,
      trainCode: queryParams.value.trainCode,
      date: queryParams.value.date,
      start: queryParams.value.start,
      end: queryParams.value.end
    }
  }).then((result) => {
    loading.value = false;
    if (result.status) {
      dailyTrainTickets.value = result.content.records;
      // 设置分页控件的值
      pagination.value.current = param.pageNum;
      pagination.value.total = result.content.total;
    } else {
      notification.error({description: result.message});
    }
  });
};

// 计算到达时间 --> 历时时长
const calDuration = (startTime, endTime) => {
  let diff = dayjs(endTime, 'HH:mm').diff(dayjs(startTime, 'HH:mm'), 'seconds');
  let time = dayjs('00:00', 'HH:mm').second(diff).format('HH:mm').split(':');
  return `${time[0] === '00' ? '' : time[0] + '时'}${time[1]}分`;
};

// 表格换页，调用请求
const handleTableChange = (page) => {
  pagination.value = page
  handleQuery({
    pageNum: page.current,
    pageSize: page.pageSize,
  });
};

onMounted(() => {
  handleQuery({
    pageNum: 1,
    pageSize: pagination.value.pageSize
  });
});
</script>
